<template>
  <section class="component note-pad-button">
    <el-button
      @click="onClickButton"
      class="list-button white-button"
      size="mini"
      type="text"
      >记事本</el-button
    >
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="记事本"
      :visible.sync="dialog"
      append-to-body
      width="800px"
      @closed="closed"
    >
      <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea" :disabled="hiddenAction || menuChannel === 18 || menuChannel === 44 || menuChannel === 34" :maxlength="500" show-word-limit>
      </el-input>
      <div class="btn">
        <el-button class="white-button" size="mini" @click="closed">关闭</el-button>
        <el-button type="primary" size="mini" @click="save" v-if="!hiddenAction && menuChannel !== 18 && menuChannel !== 44 && menuChannel !== 34">保存</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { State, namespace } from "vuex-class";
import { CaseInfoService } from "~/services/domain-service/case-info.service";

const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components:{}
})
export default class NotepadButton extends Vue {
  @Dependencies(CaseInfoService) private CaseInfoService: CaseInfoService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private hiddenAction: boolean;
  private textarea: string = ''
  private dialog: boolean = false;

  private onClickButton() {
    this.dialog = true;
    this.getDetail()
  }
  
  private getDetail() { // 获取记事本内容
    this.CaseInfoService.getCaseInfoRecordById({ caseInfoRecordId: this.caseId }).subscribe(data => {
      this.textarea = data.noteBook
    })
  }

  private save() {
    this.CaseInfoService.caseInfoNoteBook({
      caseInfoRecordId: this.caseId,
      noteBook: this.textarea
    }).subscribe(data => {
      this.dialog = false;
      this.$message.success('保存成功')
    }, err => {
      this.$message.success('保存失败')
    })
  }

  private closed() {
    this.dialog = false;
    this.textarea = ''
  }
}
</script>
<style lang="less" scoped>
  .btn{
    text-align: center;
    margin-top: 26px;
  }
</style>
